<template>
	<view class="content">
		<view class="user-box">
			<button @click="showLeftWindow(haseLeftWindow)">{{ haseLeftWindow ? '隐藏' : '显示' }}菜单</button>
			<button @click="initClassify" v-if="noClassify">初始化根目录</button>
			<vue-tree :tree="tree" ref="tree" class="tree" @blur="nodeBlur($event)" @click="clickTree">
				<template v-slot:contextmenu="{ node }">
					<view class="menu" @click="addNode(node)">新增文件夹</view>
					<view class="menu" @click="editNode(node)">改名</view>
				</template>
			</vue-tree>
		</view>
		
		<view class="files-list">
			
			<view class="uni-header">
				<view class="uni-group">
					<view class="uni-title"></view>
					<view class="uni-sub-title"></view>
				</view>
				<view class="uni-group">
					<button class="uni-button" size="mini" type="primary" @click="deleteAllFiles">删除</button>
					<button class="uni-button" size="mini" type="primary" @click="moveFiles">移动</button>
				</view>
			</view>
			<view>
				<DropFiles :classify="classify" :show-button="true"  @upload-complete="uploadComplete"></DropFiles>
			</view>
			<checkbox-group @change="checkFiles">
				<view class="grid-list">
					<view class="list">
						<view class="item">
							<view class="img"><upload-files :classify="classify" :showModal="true" :auto-upload="true" :has-list="false" ref="upload" @upload-complete="uploadComplete"></upload-files></view>
						</view>
					</view>
					<view class="list" v-for="(item, index) in filesList">
						<view class="item">
							<image
								v-if="itemTypeOf(item.type) === 'image'"
								class="img"
								:src="item.fileID + '?x-oss-process=image/resize,l_300/quality,Q_80'"
								mode="aspectFit"
								@click="previewImage(item.fileID)"
							></image>
							<video class="img" v-else-if="item.type === 'video'" :src="item.fileID" controls></video>
							<view v-else class="icon uni-icons-paperclip"></view>
							<label>
								<checkbox class="checkbox" :value="item._id" />
								<view class="name">{{ item.name }}</view>
							</label>
						</view>
					</view>
				</view>
			</checkbox-group>
			<uni-pagination :total="count" :current="page"></uni-pagination>
		</view>
	</view>
	
	<uni-popup ref="popup"><vue-tree :tree="tree" ref="popupTree" class="popup-tree" @click="clickPopupTree"></vue-tree></uni-popup>
</template>

<script>
import ClassifyMinxin from '../../common/mixin/classify/classify-mixin.js';
import WindowStyle from '../../common/mixin/classify/window-style.js';
import ClassifyFilesMinxin from '../../common/mixin/classify/classify-files-mixin.js';
import VueTree from '@tinywisp/vue-tree';
import DropFiles from '../../components/drop-files/drop-files.vue';
import UploadFiles from '../../components/upload-files/uplaod-files.vue';
export default {
	mixins: [ClassifyMinxin, ClassifyFilesMinxin, WindowStyle],
	components: {
		VueTree,
		DropFiles,
		UploadFiles
	},
	data() {
		return {};
	},

	methods: {}
};
</script>

<style lang="scss" scoped>
page {
	/* background-color: #aa557f; */
	height: 100%;
}
.content {
	height: 100%;
	display: flex;
}
.user-box {
	background-color: #fff;
	width: 250px;
	height: 100%;
	padding: 10px;
}
.menu {
	padding: 0.5rem;
	border: 1px solid #d5d5d5;
	background-color: #ececec;
}
.popup-tree{
	background-color: #FFFFFF;
}
checkbox-group {
	width: 100%;
}
.files-list {
	width: 100%;
}
.grid-list {
	width: 100%;
	grid-template-columns: repeat(5, 1fr);
	display: grid;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	.list {
		width: 100%;
		padding-top: 100%;
		position: relative;
		border: thin dotted rgb(250, 0, 255);
		border-radius: 5%;
		.checkbox {
			position: absolute;
			top: 5%;
			left: 5%;
			transform: scale(0.7);
		}
		.item {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.name {
				background-color: #8cc5ff;
				position: absolute;
				z-index: 2;
				width: 90%;
				bottom: 5%;
				left: 5%;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.icon {
				font-size: 4vw;
			}
			.img {
				border-radius: 5%;
				width: 90%;
				height: 90%;
			}
		}
	}
}
@media only screen and (max-width: 479px) {
	.grid-list {
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 4px;
		grid-column-gap: 4px;
	}
	.grid-list .list .item .icon {
		font-size: 30vw;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.grid-list {
		grid-template-columns: repeat(3, 1fr);
		grid-row-gap: 6px;
		grid-column-gap: 6px;
	}
	.grid-list .list .item .icon {
		font-size: 12vw;
	}
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.grid-list {
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 6px;
		grid-column-gap: 6px;
	}
	.grid-list .list .item .icon {
		font-size: 10vw;
	}
}
@media screen and (min-width: 1200px) {
	.grid-list {
		grid-template-columns: repeat(6, 1fr);
		grid-row-gap: 15px;
		grid-column-gap: 15px;
	}
	.grid-list .list .item .icon {
		font-size: 8vw;
	}
}

@media screen and (min-width: 1420px) {
	.grid-list {
		grid-template-columns: repeat(8, 1fr);
		grid-row-gap: 15px;
		grid-column-gap: 15px;
	}
	.grid-list .list .item .icon {
		font-size: 6vw;
	}
}

.preview-item,
.preview-image {
	width: 100%;
	height: 100%;
}
.dirs-item {
	padding: 0 2px;
}
</style>
